<template>
  <div class="manageTablePage">
    <div class="table" style="height: 90%">
      <el-table
        ref="moduleTable"
        :border="true"
        style="height: 100%"
        :row-class-name="tableRowClassName"
        :data="tableData"
      >
        <el-table-column prop="serialNumber" label="序号" width="60">
          <template #default="scope">
            <div>
              {{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="invalidResponse" label="办公平台模块">
          <template #default="scope">
            <div>
              <div style="display: flex">
                <div class="module_item">
                  <span class="module_name">模块名称：</span
                  ><span
                    >{{ scope.row?.moduleInfo?.moduleName }}
                    {{
                      scope.row?.moduleInfo?.phoneModuleName
                        ? "(" + scope.row?.moduleInfo?.phoneModuleName + ")"
                        : ""
                    }}</span
                  >
                </div>
                <div class="module_item">
                  <span class="module_name">moduelId：</span
                  ><span>{{ scope.row?.moduleInfo?.moduleId }}</span>
                </div>
                <div class="module_item">
                  <span class="module_name">appId：</span
                  ><span>{{ scope.row?.moduleInfo?.appId }}</span>
                </div>
                <div class="module_item">
                  <span class="module_name">linkAppId：</span
                  ><span>{{ scope.row?.moduleInfo?.linkAppId }}</span>
                </div>
                <div class="module_item">
                  <span class="module_name">userType：</span
                  ><span>{{ scope.row?.moduleInfo?.userType }}</span>
                </div>
              </div>

              <div>
                <span class="module_name">accessParam：</span
                ><span>{{ scope.row?.moduleInfo?.accessParam }}</span
                ><br />
                <span class="module_name">h5Param：</span
                ><span>{{ scope.row?.moduleInfo?.h5Param }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="invalidResponse" label="响应结果">
          <template #default="scope">
            <div v-for="(instruct, index) in scope.row?.instructInfo">
              <div style="display: flex" :title="instruct?.instructCode">
                <div class="module_item">
                  <span class="module_name">指令名称：</span
                  ><span>{{ instruct?.instructName }}</span>
                </div>
                <div class="module_item">
                  <span class="module_name">moduelId：</span
                  ><span>{{ instruct?.attribute?.moduleId }}</span>
                  <img
                    v-if="
                      judgeRightOrWrong(
                        instruct?.attribute?.moduleId,
                        scope.row?.moduleInfo?.moduleId
                      ) === 1
                    "
                    src="../common/img/right.png"
                  />
                  <img
                    v-else-if="
                      judgeRightOrWrong(
                        instruct?.attribute?.moduleId,
                        scope.row?.moduleInfo?.moduleId
                      ) === -1
                    "
                    src="../common/img/warn.png"
                  />
                </div>
                <div class="module_item">
                  <span class="module_name">checkId：</span
                  ><span>{{ instruct?.attribute?.checkId }}</span>
                  <img
                    v-if="
                      judgeRightOrWrong(
                        instruct?.attribute?.checkId,
                        scope.row?.moduleInfo?.appId
                      ) === 1
                    "
                    src="../common/img/right.png"
                  />
                  <img
                    v-else-if="
                      judgeRightOrWrong(
                        instruct?.attribute?.checkId,
                        scope.row?.moduleInfo?.appId
                      ) === -1
                    "
                    src="../common/img/warn.png"
                  />
                </div>
                <div class="module_item">
                  <span class="module_name">sysId：</span
                  ><span>{{ instruct?.attribute?.sysId }}</span>
                  <img
                    v-if="
                      judgeRightOrWrong(
                        instruct?.attribute?.sysId,
                        scope.row?.moduleInfo?.linkAppId ||
                          scope.row?.moduleInfo?.appId
                      ) === 1
                    "
                    src="../common/img/right.png"
                  />
                  <img
                    v-else-if="
                      judgeRightOrWrong(
                        instruct?.attribute?.sysId,
                        scope.row?.moduleInfo?.linkAppId ||
                          scope.row?.moduleInfo?.appId
                      ) === -1
                    "
                    src="../common/img/warn.png"
                  />
                </div>
                <div class="module_item">
                  <span class="module_name">userType：</span
                  ><span>{{ instruct?.attribute?.role }}</span>
                </div>
              </div>
              <div>
                <div style="display: flex; align-items: center">
                  <span class="module_name">accessParam：</span
                  ><span>{{ instruct?.webUrl }}</span>
                  <img
                    v-if="
                      judgeRightOrWrong(
                        instruct?.webUrl,
                        scope.row?.moduleInfo?.accessParam
                      ) === 1
                    "
                    src="../common/img/right.png"
                  />
                  <img
                    v-else-if="
                      judgeRightOrWrong(
                        instruct?.webUrl,
                        scope.row?.moduleInfo?.accessParam
                      ) === -1
                    "
                    src="../common/img/warn.png"
                  />
                </div>

                <div style="display: flex; align-items: center">
                  <span class="module_name">h5Param：</span
                  ><span>{{ instruct?.h5Url }}</span>
                  <img
                    v-if="
                      judgeRightOrWrong(
                        instruct?.h5Url,
                        scope.row?.moduleInfo?.h5Param
                      ) === 1
                    "
                    src="../common/img/right.png"
                  />
                  <img
                    v-else-if="
                      judgeRightOrWrong(
                        instruct?.h5Url,
                        scope.row?.moduleInfo?.h5Param
                      ) === -1
                    "
                    src="../common/img/warn.png"
                  />
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { cloneDeep } from "lodash-es";
import { computed, ref, watch } from "vue";

const props = defineProps({
  tableData: Array,
  version: Number,
  skipIdx: Number,
});

const moduleTable = ref();

// 清除robotInstructNameAndSentenceDTOS长度为0的数据
const tableData = computed(() => {
  const arr = cloneDeep(props.tableData);

  for (let i = 0; i < arr?.length; i++) {
    let item = arr?.[i];
  }

  return arr || [];
});

const tableRowClassName = (row, rowIndex) => {
  row = row.row;

  // 已解决/答案同意的记录
  if (row.isCheck === 1 || row.invalidType == 1001) {
    return "success-row";
  } else if (row.invalidType == 2) {
    return "warning-row";
  }
  return "";
};

const judgeRightOrWrong = (s1, s2) => {
  if (!s1?.trim() && !s2?.trim()) {
    return 0;
  }

  return s1 === s2 ? 1 : -1;
};

watch(
  () => props.skipIdx,
  (newVal) => {
    const rowIdx = props.skipIdx;
    const table = moduleTable.value?.$el;
    const row = table.querySelectorAll(".el-table__row")[rowIdx];

    const tableBody = document.getElementsByClassName(
      "el-scrollbar__wrap el-scrollbar__wrap--hidden-default"
    )[0];

    tableBody.scrollTop = row.offsetTop;
  }
);
</script>

<style lang="scss" scoped>
.manageTablePage {
  height: 100%;
  overflow: auto;
  .centerItem {
    .centerItemTitle {
      margin-top: 30px;
    }
  }
}

.module_name {
  font-weight: bold;
}

.module_item {
  border: 1px solid;
  padding: 10px;
  margin-right: 5px;
  border-radius: 10px;

  display: flex;
  align-items: center;
}

:deep(.el-table) {
  --el-table-row-hover-bg-color: none !important;
  --el-table-border-color: #aaaaaa !important;
  --el-table-border: 1px solid #111111 !important;

  thead th {
    font-size: 16px !important;
    color: #5c5454 !important;
    background-color: #d9d9d9;
  }

  thead {
    border: 1px solid #999999;
  }
}
</style>

<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-7);
}
</style>
